<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Handlebar新闻列表示例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .news-list > h4 {
            padding: .3rem .2rem;
            font-size: .32rem;
            border-bottom: 1px solid #d2d2d2;
        }
        .news-list ul li{
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            margin-left: .2rem;
            padding: .45rem .3rem .45rem 0;
            border-bottom: 1px solid #d2d2d2;
            font-size: .3rem;
            color: #4e4e4e;
        }
        .news-list ul li .left{
            margin-right: .4rem;
        }
        .news-list ul li .left span{
            display: block;
            width: 1.8rem;
            height: 1.2rem;
            background-color: #d2d2d2;
        }
        .news-list ul li .right{
            width: 100%;
        }
        .news-list ul li .right h4{
            font-weight: normal;
            margin-top: -.1rem;
            margin-bottom: .12rem;
        }
        .news-list ul li .right div{
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
        }
        .news-list ul li .right div span{
            display: inline-block;
            font-size: .24rem;
        }
        .news-list ul li .right div span:first-of-type{
            padding: .02rem .04rem;
            background-color: #4a6efc;
            color: #fff;
        }
        .load-tip{
            display: none;
            margin: .2rem auto;
            text-align: center;
            font-size: .24rem;
            color: #b9b9b9;
        }
    </style>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth>=640){
                            docEl.style.fontSize = '85px';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                        }
                    };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body>
<div class="news-list">
    <h4>新闻列表</h4>
    <ul id="newsList" page="1"></ul>
    <p id="loadTip" class="load-tip" toLoad="true">上拉可以加载更多</p>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
<script>
    $(window).load(function(){
        $(window).scroll(function () {
            //已经滚动到上面的页面高度
            var scrollTop = $(this).scrollTop();
            //页面高度
            var scrollHeight = $(document).height();
            //浏览器窗口高度
            var windowHeight = $(this).height();
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
            if (scrollTop + windowHeight == scrollHeight) {
                loadInfo();
            }
        });
    })
    $(function(){
        loadInfo();
    })
    /*加载分页数据*/
    function loadInfo() {
        /**最后一页不再添加数据*/
        if("false" == $("#loadTip").attr("toLoad")){
            return;
        }
        var t = $("#newsList");
        /*当前页码*/
        var page = t.attr("page");
        /*假设分页一次加载7条数据*/
        var rows = 7;
        /*假设共24条数据（如果是请求服务器接口，那么total就是接口返回的总条数）*/
        var total = 21;
        $("#loadTip").show();
        var toLoad = total - (rows * (page - 1)) - rows > 0;
        /*当没有下一页时，改变提示文字并且下次不进行填充数据*/
        if(!toLoad){
            $("#loadTip").text("加载完毕！").attr("toLoad",false);;
        }
        //通过模板定义的id获取模板
        var tpl = $("#newsListTemplate").html();
        //预编译模板
        var template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        var html = template(JSON_DATA);
        //插入模板到ul中
        t.append(html);
        t.attr("page", ++page);
    }
</script>
<script type="text/template" id="newsListTemplate">
    <!--each遍历json数组-->
    {{#each this}}
    <li class="flex">
        <div class="left">
            <span></span>
        </div>
        <div class="right">
            <h4>{{title}}</h4>
            <div class="flex">
                <span>{{tag}}</span>
                <span>{{date}}</span>
            </div>
        </div>
    </li>
    {{/each}}
</script>
<script>
    var JSON_DATA =
                    [
                        {
                            "title" : "①：①①①",
                            "date" : "2018-12-21",
                            "tag" : "今日热点"
                        },
                        {
                            "title" : "②：②②②",
                            "date" : "2018-12-20",
                            "tag" : "电竞热点"
                        },
                        {
                            "title" : "③：③③③",
                            "date" : "2018-12-21",
                            "tag" : "今日热点"
                        },
                        {
                            "title" : "④：④④④",
                            "date" : "2018-12-20",
                            "tag" : "电竞热点"
                        },
                        {
                            "title" : "⑤：⑤⑤⑤",
                            "date" : "2018-12-21",
                            "tag" : "今日热点"
                        },
                        {
                            "title" : "⑥：⑥⑥⑥",
                            "date" : "2018-12-20",
                            "tag" : "电竞热点"
                        },
                        {
                            "title" : "⑦：⑦⑦⑦",
                            "date" : "2018-12-21",
                            "tag" : "今日热点"
                        }
                    ];
</script>
</body>
</html>